<template>
  <div class="user">
    <timeline v-if="list.length > 0">
      <timeline-item v-for="(item, index) of list" :key="index" >
        <h4 :class="[index===0 ? 'recent' : '']">{{item.currentRank}}</h4>
        <p :class="[index===0 ? 'recent' : '']">￥{{item.money}}</p>
        <p :class="[index===0 ? 'recent' : '']">{{item.date}}</p>
      </timeline-item>
    </timeline>
    <divider v-else>暂无购买记录</divider>
    <public-menu></public-menu>
  </div>
</template>

<script>
import axios from 'axios'
import { Timeline, TimelineItem, Divider } from 'vux'
import PublicMenu from '../public/Menu'
export default {
  name: 'Identity',
  components: {
    Timeline,
    TimelineItem,
    Divider,
    PublicMenu
  },
  data () {
    return {
      list: []
    }
  },
  mounted () {
    axios.get('/meimai/interface/member/getBuyRankRecord', {
      params: {
        memberId: this.$store.state.userId
      }
    }).then((res) => {
      if (res.data.code === 0) {
        this.list = res.data.array
        console.log(res.data)
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.user >>> .vux-timeline-item-content
  padding: 0 0 1.5rem .5rem;
.user >>> .vux-timeline-item-content p
  margin: .1rem 0
.user
  background: #fff
  p
    color: #888
  h4
    color: #666
    font-weight: normal
  .recent
    color: rgb(4, 190, 2)
</style>
